/* eslint-disable @typescript-eslint/no-unused-vars */
import DialogBox from "@/components/DialogBox";
import { SchemaFrom } from "@/components/JsonSchemaForm/interface";
import { FormInstance } from "element-plus";
import { defineComponent, PropType } from "vue";
import { generatorParentForm } from "@/utils/schema";
import { SchemaNodeType } from "@/utils/constants";
import { SchemaNodeKey } from "@/utils/constants";
export default defineComponent({
	props: {
		isAdd: Boolean,
		//支持多级（可选择父节点）
		multiple: {
			type: Boolean,
			default() {
				return true;
			}
		},
		title: {
			type: String,
			default() {
				return "模型配置";
			}
		},
		formData: {
			type: Object as PropType<SchemaFrom>,
			default() {
				return {};
			}
		},
		treeData: {
			type: Array,
			default: () => {
				return [];
			}
		}
	},
	emits: ["submit"],
	setup(props, { attrs, emit }) {
		const formRef = ref<FormInstance>();
		watch(
			() => props.formData,
			() => {
				if (!props.isAdd) {
					props.formData.parent = props.formData.path?.replace(`.${props.formData.key}`, "");
				}
				if (props.formData.parent == props.formData.path) {
					props.formData.parent = undefined;
				}
			}
		);
		const submitFrom = () => {
			props.formData.path = props.formData.parent ? props.formData.parent + "." + props.formData.key : undefined;
			//如果选择了父节点，反向叠加嵌套父节点
			if (props.formData.path && props.formData.path != props.formData.key) {
				let submitData = generatorParentForm(JSON.parse(JSON.stringify(props.formData)));
				let pkey = Object.keys(submitData.properties!)[0];
				let parent = submitData.properties![pkey];
				props.formData.key = pkey;
				props.formData.path = pkey;
				props.formData.pathName = parent.title;
				props.formData.title = parent.title;
				props.formData.description = parent.description;
				props.formData.type = parent.type;
				props.formData.properties = parent.properties;
			}

			//节点类型是对象，并且properties是空，初始对象
			if (props.formData.type == SchemaNodeType.object && !props.formData.properties) {
				props.formData.properties = {};
			}
			emit("submit");
		};
		return () => {
			return (
				<>
					<DialogBox title={props.title} {...attrs} onConfirm={() => submitFrom()}>
						{/* scheme基础表单 */}
						<el-form ref={formRef} label-width="100px" size="large">
							{props.multiple && props.treeData.length ? (
								<el-form-item label="父节点">
									<el-tree-select
										v-model={props.formData.parent}
										data={props.treeData}
										props={{ label: "title" }}
										node-key="path"
										class="w-full"
										check-strictly
										disable={!props.isAdd}
									/>
								</el-form-item>
							) : null}
							<el-form-item label="字段标识">
								<el-input v-model={props.formData.key} disabled={!props.isAdd} />
							</el-form-item>
							<el-form-item label="字段名称">
								<el-input v-model={props.formData.title} />
							</el-form-item>
							<el-form-item label="字段描述">
								<el-input v-model={props.formData.description} />
							</el-form-item>
							<el-form-item label="数据类型">
								<el-radio-group v-model={props.formData.type}>
									<el-radio-button label="string">字符串</el-radio-button>
									<el-radio-button label="number">数值</el-radio-button>
									<el-radio-button label="boolean">布尔</el-radio-button>
									<el-radio-button label="object">对象</el-radio-button>
									{/* <el-radio-button label="object">数组</el-radio-button> */}
								</el-radio-group>
							</el-form-item>
							{true ? null : (
								<el-form-item label="格式校验">
									<el-checkbox v-model={props.formData.valid} />
								</el-form-item>
							)}
							{/* 字符串校验参数 */}
							{false && props.formData.valid ? (
								<>
									<el-form-item label="最大长度">
										<el-inputNumber v-model={props.formData.maxLength} style="width:100%" />
									</el-form-item>
									<el-form-item label="最小长度">
										<el-inputNumber v-model={props.formData.minLength} style="width:100%" />
									</el-form-item>
									<el-form-item label="验证规则">
										<el-input v-model={props.formData.pattern} placeholder="正则表达式" />
									</el-form-item>
								</>
							) : null}
						</el-form>
					</DialogBox>
				</>
			);
		};
	}
});
